<section id="ratchet_layout_section" data-role="section">
	<header class="bar bar-nav">
	  	<a class="icon icon-left-nav pull-left" data-toggle="back" href="#"></a>
	  	<a class="icon icon-compose pull-right"></a>
	  	<h1 class="title">常用布局</h1>
	</header>
	<div class="bar bar-standard bar-header-secondary">
	  	<div class="segmented-control">
		  	<a class="control-item active" href="#">
		    one
		  	</a>
		  	<a class="control-item" href="#">
		    two
		  	</a>
		  	<a class="control-item" href="#">
		    three
		  	</a>
		</div>
	</div>
	
	<article data-role="article" id="ratchet_layout_article" class="active" data-scroll="verticle" style="top:88px;bottom:50px;">
		<div class="scroller padded">
			<div class="content-padded">
			  	<h1>h1. Heading</h1>
			 	<h2>h2. Heading</h2>
			  	<h3>h3. Heading</h3>
			  	<h4>h4. Heading</h4>
			  	<h5>h5. Heading</h5>
			  	<h6>h6. Heading</h6>
			  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			  quis nostrud exercitation ullamco.</p>
			</div>
		</div>
	</article>
	<nav class="bar bar-tab">
		<a class="tab-item active" href="#">
		   	<span class="icon icon-home"></span>
		    <span class="tab-label">Home</span>
		</a>
		<a class="tab-item" href="#">
			<span class="icon icon-person"></span>
			<span class="tab-label">Profile</span>
		</a>
		<a class="tab-item" href="#">
			<span class="icon icon-star-filled"></span>
			<span class="tab-label">Favorites</span>
		</a>
		<a class="tab-item" href="#">
			<span class="icon icon-search"></span>
			<span class="tab-label">Search</span>
		</a>
		<a class="tab-item" href="#">
			<span class="icon icon-gear"></span>
			<span class="tab-label">Settings</span>
		</a>
	</nav>
</section>